<template>
  <div class="news-detail-container">
    <!-- 头部信息 -->
    <div class="news-header">
      <h1 class="news-title">{{ newsData.title }}</h1>
      <div class="news-meta">
        <span class="author">发布人: {{ newsData.author }}</span>
        <span class="time">{{ formatTime(newsData.createTime) }}</span>
        <span class="views">浏览: {{ newsData.viewCount }}</span>
      </div>
    </div>

    <!-- 幻灯片展示 -->
    <div v-if="newsData.isSlide" class="news-slider">
      <el-carousel height="400px" indicator-position="outside">
        <el-carousel-item v-for="(img, index) in newsData.slideImages" :key="index">
          <el-image 
            :src="img" 
            fit="cover" 
            style="width: 100%; height: 100%"
            :preview-src-list="newsData.slideImages"
            :initial-index="index"
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 基本信息 -->
    <div class="news-basic-info">
      <div class="info-item">
        <el-icon><Location /></el-icon>
        <span>资讯来源: {{ newsData.source }}</span>
      </div>
      <div class="info-item">
        <el-icon><Clock /></el-icon>
        <span>发布时间: {{ formatDateTime(newsData.createTime) }}</span>
      </div>
      <div class="info-item">
        <el-icon><Collection /></el-icon>
        <span>所属分类: {{ newsData.category }}</span>
      </div>
    </div>

    <!-- 标签 -->
    <div class="news-tags">
      <el-tag 
        v-for="(tag, index) in newsData.tags" 
        :key="index" 
        :type="['', 'success', 'info'][index % 3]"
        size="small"
      >
        {{ tag }}
      </el-tag>
    </div>

    <!-- 内容区域 -->
    <div class="news-content">
      <h3>资讯摘要</h3>
      <p class="summary">{{ newsData.summary }}</p>

      <h3>详细内容</h3>
      <div class="detail-content" v-html="newsData.detail || newsData.content"></div>
    </div>

    <!-- 相关图片 -->
    <div v-if="newsData.images.length > 0" class="news-images">
      <h3>相关图片</h3>
      <div class="image-grid">
        <el-image 
          v-for="(img, index) in newsData.images" 
          :key="index"
          :src="img" 
          fit="cover" 
          class="grid-image"
          :preview-src-list="newsData.images"
        />
      </div>
    </div>

    <!-- 分享按钮 -->
    <div class="share-section">
      <div class="share-title">分享这篇资讯：</div>
      <div class="share-buttons">
        <el-button class="share-btn wechat" @click="shareToWechat">
          <el-icon><ChatRound /></el-icon>
          微信
        </el-button>
        <el-button class="share-btn weibo" @click="shareToWeibo">
          <el-icon><Opportunity /></el-icon>
          微博
        </el-button>
        <el-button class="share-btn qq" @click="shareToQQ">
          <el-icon><ChatDotRound /></el-icon>
          QQ
        </el-button>
      </div>
    </div>

    <!-- 评论区 -->
    <div class="comment-section">
      <h3 class="comment-title">评论区 ({{ comments.length }})</h3>
      
      <!-- 评论输入框 -->
      <div class="comment-input">
        <el-avatar :src="userInfo.avatar" size="small" />
        <el-input
          v-model="commentContent"
          placeholder="留下你的精彩评论..."
          :rows="3"
          type="textarea"
          resize="none"
        />
        <div class="comment-actions">
          <el-button type="primary" size="small" @click="submitComment" :disabled="!commentContent">
            发表评论
          </el-button>
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="comment-list">
        <div v-for="comment in comments" :key="comment.id" class="comment-item">
          <el-avatar :src="comment.avatar" size="small" />
          <div class="comment-content">
            <div class="comment-header">
              <span class="username">{{ comment.username }}</span>
              <span class="time">{{ formatTime(comment.createTime) }}</span>
            </div>
            <div class="comment-text">{{ comment.content }}</div>
            <div class="comment-footer">
              <span class="like" @click="toggleLike(comment)">
                <el-icon :color="comment.isLiked ? '#f56c6c' : '#999'">
                  <Goods />
                </el-icon>
                {{ comment.likes }}
              </span>
              <span class="reply" @click="showReplyInput(comment)">
                <el-icon><ChatLineRound /></el-icon>
                回复
              </span>
            </div>

            <!-- 回复输入框 -->
            <div v-if="comment.showReply" class="reply-input">
              <el-input
                v-model="replyContent"
                placeholder="写下你的回复..."
                :rows="2"
                type="textarea"
                resize="none"
              />
              <div class="reply-actions">
                <el-button size="small" @click="cancelReply(comment)">取消</el-button>
                <el-button type="primary" size="small" @click="submitReply(comment)" :disabled="!replyContent">
                  回复
                </el-button>
              </div>
            </div>

            <!-- 回复列表 -->
            <div v-if="comment.replies && comment.replies.length" class="reply-list">
              <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                <el-avatar :src="reply.avatar" size="small" />
                <div class="reply-content">
                  <div class="reply-header">
                    <span class="username">{{ reply.username }}</span>
                    <span class="time">{{ formatTime(reply.createTime) }}</span>
                  </div>
                  <div class="reply-text">{{ reply.content }}</div>
                  <div class="reply-footer">
                    <span class="like" @click="toggleLike(reply)">
                      <el-icon :color="reply.isLiked ? '#f56c6c' : '#999'">
                        <Goods />
                      </el-icon>
                      {{ reply.likes }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { 
  Location, 
  Clock, 
  Collection,
  ChatRound,
  Opportunity,
  ChatDotRound,
  Goods,
  ChatLineRound
} from '@element-plus/icons-vue'
import dayjs from 'dayjs'

// 资讯数据
const newsData = ref({
  id: 1,
  title: '2023年度校园科技创新成果展圆满落幕',
  content: '本次科技创新成果展展示了学校师生在过去一年中的优秀科研成果...',
  author: '校科技处',
  createTime: '2023-05-20 10:00:00',
  isSlide: true,
  slideImages: [
    'https://p3.hippopx.com/preview/7/373/beach-cave-natural-cave-formation-relaxation-peaceful-beach-body-of-water-brown-tunnel-sandy-beach-ocean-view-coastal-cave.jpg',
    'https://p3.hippopx.com/preview/567/506/people-walking-pedestrian-line-street-charming-urban-scene-old-town-historic-buildings-crosswalk-foreground-urban-landscape-cityscape.jpg',
    'https://p3.hippopx.com/preview/627/139/beach-palm-trees-tropical-beach-clear-blue-waters-maldives-idyllic-scene-sandy-beach-tropical-paradise-beach-vacation-beach-landscape.jpg'
  ],
  viewCount: 10000,
  tags: ['科技', '创新', '展览'],
  source: '校科技处',
  category: '校园新闻',
  summary: '2023年度校园科技创新成果展于上周圆满结束，展览集中展示了学校师生在过去一年中的优秀科研成果和创新项目，吸引了众多师生参观。',
  detail: `
    <h4>展览概况</h4>
    <p>本次科技创新成果展于5月15日至5月19日在学校科技馆举行...</p>
    <h4>参展项目</h4>
    <ul>
      <li>人工智能实验室的智能机器人项目</li>
      <li>材料学院的纳米材料研究成果</li>
      <li>计算机学院的大数据应用平台</li>
    </ul>
    <h4>活动反响</h4>
    <p>展览期间共接待参观者超过3000人次...</p>
  `,
  images: [
    'https://p3.hippopx.com/preview/540/248/city-at-night-lightning-storm-urban-skyline-waterfront-reflections-night-cityscape-thunderstorm-city-lights-skyscrapers-night-photography-dramatic-weather.jpg',
    'https://p3.hippopx.com/preview/461/376/tower-of-pisa-leaning-tower-of-pisa-italian-landmark-clear-sky-low-angle-view-pisa-italy-famous-tower-architectural-wonder-historic-monument.jpg'
  ]
})

// 用户信息
const userInfo = ref({
  id: 1001,
  username: '求知者',
  avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar1.jpg'
})

// 评论数据
const comments = ref([
  {
    id: 1,
    username: '科技爱好者',
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar2.jpg',
    content: '这次展览的机器人项目非常精彩，特别是那个能写书法的机器人，太神奇了！',
    createTime: '2023-05-20 11:30:00',
    likes: 15,
    isLiked: false,
    showReply: false,
    replies: [
      {
        id: 101,
        username: '机器人小迷',
        avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar3.jpg',
        content: '我也特别喜欢那个书法机器人，听说还能写不同的字体呢！',
        createTime: '2023-05-20 12:15:00',
        likes: 3,
        isLiked: false
      }
    ]
  },
  {
    id: 2,
    username: '材料研究员',
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar4.jpg',
    content: '纳米材料的展示部分很有启发性，希望能有更多这样的交流机会。',
    createTime: '2023-05-21 09:45:00',
    likes: 8,
    isLiked: true,
    showReply: false,
    replies: []
  }
])

// 评论输入
const commentContent = ref('')
const replyContent = ref('')
const currentReplyComment = ref<any>(null)

// 格式化时间
const formatTime = (timeStr: string) => {
  return dayjs(timeStr).format('YYYY-MM-DD HH:mm')
}

// 格式化日期时间
const formatDateTime = (timeStr: string) => {
  return dayjs(timeStr).format('YYYY年MM月DD日 HH:mm')
}

// 分享功能
const shareToWechat = () => {
  console.log('分享到微信')
  // 实际项目中可以调用微信JS-SDK
}

const shareToWeibo = () => {
  console.log('分享到微博')
  // 实际项目中可以调用微博分享接口
}

const shareToQQ = () => {
  console.log('分享到QQ')
  // 实际项目中可以调用QQ分享接口
}

// 评论功能
const submitComment = () => {
  if (!commentContent.value.trim()) return
  
  const newComment = {
    id: Date.now(),
    username: userInfo.value.username,
    avatar: userInfo.value.avatar,
    content: commentContent.value,
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    likes: 0,
    isLiked: false,
    showReply: false,
    replies: []
  }
  
  comments.value.unshift(newComment)
  commentContent.value = ''
}

const showReplyInput = (comment: any) => {
  // 先关闭所有回复输入框
  comments.value.forEach(c => c.showReply = false)
  comment.showReply = true
  currentReplyComment.value = comment
}

const cancelReply = (comment: any) => {
  comment.showReply = false
  replyContent.value = ''
  currentReplyComment.value = null
}

const submitReply = (comment: any) => {
  if (!replyContent.value.trim()) return
  
  const newReply = {
    id: Date.now(),
    username: userInfo.value.username,
    avatar: userInfo.value.avatar,
    content: replyContent.value,
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    likes: 0,
    isLiked: false
  }
  
  if (!comment.replies) {
    comment.replies = []
  }
  
  comment.replies.push(newReply)
  replyContent.value = ''
  comment.showReply = false
  currentReplyComment.value = null
}

// 点赞功能
const toggleLike = (item: any) => {
  item.isLiked = !item.isLiked
  item.likes += item.isLiked ? 1 : -1
}
</script>

<style scoped lang="scss">
.news-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.news-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;

  .news-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.4;
  }

  .news-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #666;

    .author {
      color: var(--el-color-primary);
    }
  }
}

.news-slider {
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.news-basic-info {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;

  .info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #666;

    .el-icon {
      color: var(--el-color-primary);
    }
  }
}

.news-tags {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.news-content {
  margin-bottom: 30px;
  line-height: 1.8;

  h3 {
    font-size: 18px;
    color: #333;
    margin: 24px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
  }

  .summary {
    font-size: 16px;
    color: #444;
    margin-bottom: 20px;
    line-height: 1.8;
  }

  .detail-content {
    font-size: 15px;
    color: #555;
    line-height: 1.8;

    :deep(h4) {
      font-size: 16px;
      color: #333;
      margin: 20px 0 10px;
    }

    :deep(ul) {
      padding-left: 20px;
      margin: 10px 0;
    }

    :deep(li) {
      margin-bottom: 8px;
    }

    :deep(img) {
      max-width: 100%;
      border-radius: 4px;
      margin: 10px 0;
    }
  }
}

.news-images {
  margin-bottom: 30px;
  color: #333;
  .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 16px;

    .grid-image {
      height: 180px;
      border-radius: 8px;
      cursor: pointer;
      transition: transform 0.3s;

      &:hover {
        transform: scale(1.02);
      }
    }
  }
}

.share-section {
  margin: 40px 0;
  padding: 20px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;

  .share-title {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
  }

  .share-buttons {
    display: flex;
    gap: 15px;

    .share-btn {
      display: flex;
      align-items: center;
      gap: 5px;

      &.wechat {
        background: #07C160;
        color: white;
        border-color: #07C160;

        &:hover {
          background: #06AD56;
          border-color: #06AD56;
        }
      }

      &.weibo {
        background: #E6162D;
        color: white;
        border-color: #E6162D;

        &:hover {
          background: #D0152A;
          border-color: #D0152A;
        }
      }

      &.qq {
        background: #12B7F5;
        color: white;
        border-color: #12B7F5;

        &:hover {
          background: #0FA7E0;
          border-color: #0FA7E0;
        }
      }
    }
  }
}

.comment-section {
  margin-top: 40px;

  .comment-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  .comment-input {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;

    .el-avatar {
      margin-top: 8px;
    }

    .comment-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }

  .comment-list {
    .comment-item {
      display: flex;
      gap: 15px;
      padding: 15px 0;
      border-bottom: 1px solid #f0f0f0;

      .comment-content {
        flex: 1;

        .comment-header {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 8px;

          .username {
            font-weight: 500;
            color: #333;
          }

          .time {
            font-size: 12px;
            color: #999;
          }
        }

        .comment-text {
          font-size: 14px;
          color: #333;
          line-height: 1.6;
          margin-bottom: 10px;
        }

        .comment-footer {
          display: flex;
          gap: 20px;
          font-size: 12px;
          color: #999;

          .like, .reply {
            display: flex;
            align-items: center;
            gap: 3px;
            cursor: pointer;
            transition: color 0.3s;

            &:hover {
              color: var(--el-color-primary);
            }
          }
        }

        .reply-input {
          margin-top: 15px;
          padding-top: 10px;
          border-top: 1px dashed #eee;

          .reply-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 10px;
          }
        }

        .reply-list {
          margin-top: 15px;
          padding-left: 15px;
          border-left: 2px solid #eee;

          .reply-item {
            display: flex;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px dashed #f0f0f0;

            &:last-child {
              border-bottom: none;
            }

            .reply-content {
              flex: 1;

              .reply-header {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 5px;

                .username {
                  font-weight: 500;
                  font-size: 13px;
                  color: #333;
                }

                .time {
                  font-size: 11px;
                  color: #999;
                }
              }

              .reply-text {
                font-size: 13px;
                color: #555;
                line-height: 1.6;
              }

              .reply-footer {
                margin-top: 5px;

                .like {
                  display: flex;
                  align-items: center;
                  gap: 3px;
                  font-size: 11px;
                  color: #999;
                  cursor: pointer;
                  transition: color 0.3s;

                  &:hover {
                    color: var(--el-color-primary);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .news-detail-container {
    padding: 15px;
  }

  .news-header .news-title {
    font-size: 20px;
  }

  .news-basic-info {
    flex-direction: column;
    gap: 12px;
  }

  .news-images .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .share-buttons {
    flex-wrap: wrap;
  }

  .comment-input {
    flex-direction: column;
  }
}
</style>